import React, {Component} from 'react';
import {StyleSheet,Button, Text, View, Platform, Image, TouchableOpacity,Dimensions,Linking} from 'react-native';

import ParallaxScrollView from 'react-native-parallax-scroll-view';
import Ionicons from "react-native-vector-icons/Ionicons";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";

import NavigationBar from "../common/NavigationBar";
import {AboutList} from '../common/More_Menu'
import AboutPageData from './data/AboutPageData.json';
import AboutAuthorPage from "./AboutAuthorPage";

const STICKY_HEADER_HEIGHT = Platform.OS === 'ios' ? 84 : 90;

// 关于页面详情
class AboutPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      aboutData: {},
      headerTitleFlag: true, // 视差标题隐藏或显示
    }
  }

  render() {
    return (
      <View style={{flex: 1}}>
        {/* 顶部导航栏处理 */}
        <NavigationBar
          statusBar={{hidden:true}}
          hide={true}
        />
        <ParallaxScrollView
          renderBackground={this.headBackground}
          contentBackgroundColor={'#f3f3f3'}
          parallaxHeaderHeight={270}
          stickyHeaderHeight={STICKY_HEADER_HEIGHT}
          renderForeground={this.renderForeground}
          onChangeHeaderVisibility={this.changeHeader}
          renderFixedHeader={this.fixedHeader}
        >
          {this.renderContent()}
        </ParallaxScrollView>
      </View>
    );
  }

  componentDidMount() {
    // fetch('https://www.devio.org/io/GitHubPopular/json/github_app_config.json')
    //   .then(res => {
    //     if (res.ok) {
    //       return res.json()
    //     }
    //   })
    //   .then(value => {
    //     let {aboutData} = this.state;
    //     this.setState({
    //       aboutData: value
    //     });
    //     console.log(value)
    //   })
    //   .catch(err => {
    //     console.log(err)
    //   })

    this.setState({
      aboutData: AboutPageData
    });

  };

  linkingHandle = (i) => {
    if (i ===1 )  {
      this.goAuthor()
    } else if (i===2){
      this.linkingEmailHandle()
    }
  };

  // 前往作者页面详情
  goAuthor = () => {
    let {navigation} = this.props;
    navigation.push('AboutAuthorPage')
  };

  // 连接邮箱
  linkingEmailHandle = async () => {
    let url = 'mailto://crazycodeboy@gmail.com';
    try{
      // 是否可以打开url
      let res = await Linking.canOpenURL(url);

      //不可以打开url，打印消息
      if (!res){
        return console.log('Can\'t handle url: ',url)
      }

      // 可以打开，连接url
      Linking.openURL(url)
        .then(value=>{
          console.log('value',value)
        })
        .catch(err=>{
          console.log('err',err)
        })
    } catch(error){
      console.log('An error occurred ',error)
    }

  };

  // 渲染内容
  renderContent = () => {
    return AboutList.map((item,i)=>{
      return <TouchableOpacity key={i} style={styles.contentItem} onPress={()=>{this.linkingHandle(i)}}>
        <View style={styles.iconNameBox}>
          <item.Icons name={item.icon} size={26} color={'#666'}/>
          <Text style={styles.contentName}>{item.name}</Text>
        </View>
        <Ionicons name={'arrow-forward'} size={26} color={'#666'}/>
      </TouchableOpacity>
    })
  };

  // 视差头部隐藏或者显示
  changeHeader = (flag) => {
    this.setState({
      headerTitleFlag : flag,
    })
  };

  // 视差图隐藏是显示的标题
  fixedHeader = () => {
    let {headerTitleFlag} = this.state;
    let {aboutData} = this.state;
    if (aboutData.app) {
      return <View style={styles.fixedHeaderBox}>
        {/* 左边返回按钮 */}
        <TouchableOpacity onPress={this.goBack}>
          <Ionicons name={'ios-arrow-back'} size={26} color={'#fff'}/>
        </TouchableOpacity>

        {/* 中间的title*/}
        {
          !headerTitleFlag ? <Text style={styles.fixedHeader}>{aboutData.app.name}</Text> : null
        }

        {/* 右边分享按钮 */}
        <TouchableOpacity>
          <MaterialIcons name={'share'} size={26} color={'white'}/>
        </TouchableOpacity>
      </View>
    }
  };

  // 滚动视图头部背景
  headBackground = () => {
    let {aboutData} = this.state;
    if (aboutData.app) {
      return <Image source={{uri:aboutData.app.backgroundImg}} style={styles.headImg}/>
    }
  };

  // 滚动视图header
  renderForeground=() => {
    let {aboutData} = this.state;
    if (aboutData.app) {
      return <View style={styles.foreground} key="parallax-header">
        <Image source={{uri:aboutData.app.avatar}} style={styles.foregroundImg}/>
        <Text style={styles.foregroundTitle}>{aboutData.app.name}</Text>
        <Text style={styles.foregroundTxt}>{aboutData.app.description}</Text>
      </View>
    }
    return null
  };

  // header左侧返回按钮
  goBack = () => {
    let {navigation} = this.props;
    navigation.goBack()
  };

}
const screenW = Dimensions.get('window').width;
const styles = StyleSheet.create({
  foreground:{
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headImg:{
    width: screenW,
    height: '100%',
  },
  fixedHeaderBox:{
    flex:1,
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems: 'center',
    paddingLeft: 10,
    paddingRight: 10,
  },
  fixedHeader:{
    fontSize: 26,
    color:'#fff'
  },
  foregroundImg:{
    width: 100,
    height:100,
    borderRadius: 50
  },
  foregroundTitle:{
    color:'#fff',
    fontSize: 26,
  },
  foregroundTxt:{
    color:'#fff',
    paddingLeft: 20,
    paddingRight: 20,
  },
  contentItem:{
    flexDirection: 'row',
    backgroundColor:'#fff',
    borderBottomWidth: 1,
    borderColor: '#f3f3f3',
    height: 60,
    justifyContent:'space-between',
    alignItems:'center',
    paddingLeft: 10,
    paddingRight: 10,
  },
  iconNameBox:{
    flexDirection:'row',
  },
  contentName:{
    marginLeft: 10
  }
});

export default AboutPage;